<template>
  <div class="announcement-editor">
    <table-title
        title="发布公告"
        button-mode="back"
        :back-path="'/admin/announcement'"
        icon="el-icon-s-order">
    </table-title>

    <!-- form -->
    <div class="form-content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="100px">
        <el-row>
          <el-col :span="14">
            <el-form-item label="标题" prop="title" key="title">
              <el-input v-model="form.title" placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="14">
            <el-form-item label="内容" prop="content" key="content">
              <el-input
                  type="textarea"
                  v-model="form.content"
                  placeholder="请输入内容"
                  rows="5">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="重要">
          <el-switch v-model="form.importance" prop="push" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>

        <el-row class="action-button">
          <el-col :span="14" align="right">
            <el-button type="danger" icon="el-icon-close" @click="back">取消</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="confirm">
              {{ editID == -1 ? '新增' : '保存' }}
            </el-button>
          </el-col>
        </el-row>
      </el-form>

    </div>
  </div>
</template>

<script>
import TableTitle from "../../../components/TableTitle";
import modelAnn from "../../../models/announcement";

export default {
  name: "AnnouncementEditor",
  components: {TableTitle},
  data() {
    return {
      // 正在编辑的
      editID: -1,

      // 数据
      form: {},
      /*form: {
        "announcementId": 0,
        "content": "string",
        "importance": "string",
        "time": "2021-04-24T05:37:27.210Z",
        "title": "string",
        "userId": 0
      }*/

      // 校验规则
      formRules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 1, max: 100, message: '标题长度在1到100个字符', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '请输入内容', trigger: 'blur'},
          {min: 1, max: 1024, message: '内容长度在1到1024个字符', trigger: 'blur'}
        ]
      }
    };
  },
  created() {
    // 获取参数
    this.editID = this.$route.params.id || -1;

    // 编辑信息，获取信息
    if (this.editID != -1) this.getData();
  },
  methods: {
    /**
     * 获取信息
     */
    getData() {
      modelAnn.getById(this.editID).then((data) => {
        // 无数据
        if (data == null) {
          this.$message({
            type: 'error',
            message: '加载数据失败！',
            onClose: () => {
              this.$router.replace('/admin/announcement');
            }
          });
        }
        else {
          this.form = data;
        }
      });
    },

    /**
     * 返回
     */
    back() {
      this.$router.replace('/admin/announcement');
    },

    /**
     * 保存
     */
    confirm() {
      // 新增
      if (this.editID == -1) {
        this.axios.post(this.$store.state.api + '/announcement/add', {
          content: this.form.content,
          importance: this.form.importance,
          time: new Date().format("yyyy-MM-ddThh:mm:ss.SZ"),
          title: this.form.title,
          userId: this.$store.state.userData.userId
        }).then((response) => {
          this.$message({
            type: response.data.data ? 'success' : 'error',
            message: response.data.data ? '添加成功！' : '添加失败！',
            duration: 1000,
            onClose: () => {
              this.back();
            }
          });
        }).catch((error) => {
          console.log(error);
        });
      }
      // 更新
      else {
        this.axios.put(this.$store.state.api + '/announcement/update', [{
          content: this.form.content,
          importance: this.form.importance,
          title: this.form.title,
          announcementId: this.editID
        }]).then((response) => {
          this.$message({
            type: response.data.data ? 'success' : 'error',
            message: response.data.data ? '修改成功！' : '修改失败！',
            duration: 1000,
            onClose: () => {
              this.back();
            }
          });
        }).catch((error) => {
          console.log(error);
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/less/base.less";

.announcement-editor {
  color: @fontColor;
  min-height: 100%;
  background: white;
}
</style>
